<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>隔行变色</title>
  <!-- IMPORT CSS -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    #box {
      margin: 10px auto;
      width: 500px;
    }

    #box li {
      line-height: 35px;
      border-bottom: 1px dashed #999;
    }
  </style>
</head>
<body>
  <ul id="box">
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
  </ul>
  
  <!-- IMPORT JS -->
  <script>
    let box = document.getElementById('box');
    let list = box.getElementsByTagName('li');

    /* 
     * 自定义属性编程思想
     *  前期把一些值存储到元素的自定义属性上, 后期需要用到的时 *  候,直接从属性上获取到这些值即可
    */
    /* for(let i = 0; i < list.length; i++) {
      let bg = i % 2 === 0 ? '#fff' : 'pink';
      list[i].style.backgroundColor = bg;
      // 设置自定义属性myOriginBg用来存储每一个li的背景
      list[i].myOriginBg = bg;

      list[i].onmouseover = function() {
        this.style.backgroundColor = 'lightblue';
      }
      list[i].onmouseout = function() {
        list[i].style.backgroundColor = this.myOriginBg;
      }
    } */

    for(let i = 0; i < list.length; i++) {
      let bg = i % 2 === 0 ? '#fff' : 'pink';
      list[i].style.backgroundColor = bg;
      list[i].myOriginBg = bg;

      list[i].onmouseover = function() {
        list[i].style.backgroundColor = 'yellow';
      }

      list[i].onmouseout = function() {
        list[i].style.backgroundColor = this.myOriginBg;
      }
    }
  </script>
</body>
</html>